import React, { Component } from 'react'
import { Button } from 'antd';
import { connect } from 'react-redux';
import HomeData from '../../components/home/HomeData'
import './Home.less'
class Home extends Component {
  // constructor(props) {
  //   super(props)
  // }
  numAction = (type) => {
    const { dispatch } = this.props
    let { countNum } = this.props
    if (type === 'add') {
      countNum += 1
    } else {
      countNum -= 1
    }
    dispatch({
      type: 'changeNum',
      payload: {
        count: countNum
      }
    })
  }
  statusAction = (type) => {
    const { dispatch } = this.props
    let { statusTxt } = this.props
    switch (type) {
      case 'undo':
        statusTxt = '未完成'
        break;
      case 'doing':
        statusTxt = '进行中'
        break
      case 'done':
        statusTxt = '已完成'
        break
      default:
        break
    }
    dispatch({
      type: 'statusChange',
      payload: {
        status: statusTxt
      }
    })
  }
  render () {
    const { countNum, statusTxt } = this.props
    return (
      <div className="home-page">
        <div className="home-list">
          <div>
            <span>增减数：</span>
            <span>{ countNum }</span>
            <Button onClick={this.numAction.bind(this, 'add')}>增加</Button>
            <Button onClick={this.numAction.bind(this, 'subtract')}>减少</Button>
          </div>
          <div>
            <span>修改状态：</span>
            <span>{ statusTxt }</span>
            <Button onClick={this.statusAction.bind(this, 'undo')}>未完成</Button>
            <Button onClick={this.statusAction.bind(this, 'doing')}>进行中</Button>
            <Button onClick={this.statusAction.bind(this, 'done')}>已完成</Button>
          </div>
          <HomeData></HomeData>
        </div>
      </div>
    )
  }
}

function mapStateToProps (state) {
  const { count } = state.changeNum
  const { status } = state.changeStatus
  return {
    countNum: count,
    statusTxt: status
  }
}
export default connect(mapStateToProps)(Home)
